<html>
<head>
    <meta charste="utf-8"/>
    <script type="text/javascript" src="{{ static_url('jquery-1.10.2.min.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('socket.io-1.3.5.min.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('yunba-js-sdk.js') }}"></script>
    <script type="text/javascript">

      var yunba_demo = new Yunba({appkey: '5657f53ef085fc471efe0864'});
      var topic = '{{ topic }}'

      yunba_demo.init(function (success) {
        if (success) {
          yunba_demo.connect_by_customid('{{ uid }}', function (success, msg) {
            if (success){
              console.log('连接成功!');
                yunba_demo.subscribe({'topic': topic }, function (success, msg) {
                  if (success){
                      console.log('你已成功订阅频道');
                      yunba_demo.set_message_cb(function (data) {
                        $('img').hide();
                        $('#box').show();
                        console.log('Topic:' + data.topic + ',Msg:' + data.msg);
                        $('#rec').val(data.msg);
                      });
                    }else{
                          console.log(msg);
                    }
                });
          }else{
            console.log(msg);
          }

          });
        }
      });

      function  publish(xxxx){
         yunba_demo.publish({'topic': topic, 'msg': xxxx},
          function (success, msg) {
            if (success){
              console.log('消息发布成功');
            }else{
              console.log(msg);
            }
        });
      }

    </script>

</head>
<body>

    <img src="{{ reverse_url('qr') }}"/>

    <div id="box" hidden>
      <div>
          <input id='pub' type='text' maxlength="100" placeholder="最大长度100"/>
      </div>
      <div>
          <textarea id='rec'></textarea>
      </div>
    </div>
</body>
<script type="text/javascript">
  $(document).ready(function(){
    $('#pub').change(function(){
        publish($(this).val());
    });

  })
</script>
</html>

